<template>
  <el-container class="el-container-index">
    <!--左侧容器-->
    <el-aside  align="left">
      <!--用户拥有的菜单-->
      <AsideMenu></AsideMenu>
    </el-aside>
    <!--右侧主界面-->
    <el-container>
      <!--右侧界面的头部导航条-->
      <!--右侧界面的头部导航条-->
      <el-header>
        <IndexHead></IndexHead>
      </el-header>
      <el-main>
        <router-view v-if="isRouterActive"></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>
<script lang="ts" setup>
import AsideMenu from '@/views/index/AsideMenu.vue';
import IndexHead from '@/views/index/IndexHead.vue';
import MyBreadcrumb from '@/components/MyBreadcrumb.vue';

// 解决刷新当前路由的问题。设计来刷新主界面数据
import { ref, provide, nextTick } from 'vue';

const isRouterActive = ref(true); // 用于重新渲染
provide('reload', async () => {
  isRouterActive.value = false;
  await nextTick();
  isRouterActive.value = true;
  // nextTick(() => {
  //   isRouterActive.value = true;
  // });
});
</script>
<style lang="scss" scoped>
/*自定义样式*/
.el-container-index{
  height: 100vh;
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
  .el-aside{
    /*  left: 0;
    bottom: 0;
    overflow-y: auto;*/
    width:200px;
  }
  .el-header { /*右侧界面的头部导航条，高度默认是60*/
    text-align: right;
    border-bottom: solid 1px #e6e6e6;
  }
  //.el-main {
  //  padding: 0;
  //}
}

</style>
